import React, { Component } from 'react';
class DemoEventFn extends Component {
  constructor() {
    super();
    this.state={
      count:10
    }
  }
  // 普通函数this指向不同
  //  add () {
  //     console.log('this', this)
  //     this.setState({
  //       count: this.state.count + 1
  //     })
  //   }

  // 定义add为箭头函数
  add = ()=>{
    console.log('this',this);
    this.setState({
      count:this.state.count+1
    })
  }

  getId = (e) => {
    console.log('e', e.target.dataset.id)
}
  render() { 
    return ( <div className='serach'>
     <h2>02.事件处理-更改this指向</h2>
     count:{this.state.count}
     <button onClick={this.add}>count++</button>
     {/* 使用bind实现count++ */}
     <button onClick={this.add.bind(this)}>使用bind count++</button>
     {/* 箭头函数 */}
     <button onClick={()=>this.add()}>使用箭头函数的方式count++</button>
     {/* 定义事件函数为箭头函数 */}
     <button onClick={this.add}>定义事件函数为箭头函数count++</button>
     <br />
     {/* 获取属性  鼠标离开事件onMouseLeave*/}
     <button data-id='100' onMouseLeave={(e)=> this.getId(e)}>点击跳转详情</button>
    </div> );
  }
}
 
export default DemoEventFn;